import React, { Component } from 'react'
import { Result,
    List,
    WhiteSpace,
    Button,
    Modal,
} from 'antd-mobile'
import { connect } from 'react-redux'
import { resetUser, logout } from '../../redux/action'
import Cookies from 'js-cookie'
// import './index.less'

const Item = List.Item
const Brief = Item.Brief
const alert = Modal.alert
class Personal extends Component{

    logout = () =>{
        alert('退出登录', '你确定吗???', [
            { text: '取消', style: 'default' },
            { text: '确认', onPress: () => {
                Cookies.remove('userId')
                this.props.resetUser()
                this.props.logout()
            } },
        ])

    }
    render() {
        const user = this.props.user
        return(
            <div className='personal-page' >
                <Result
                    img={<img src={ require(`../../assets/avatars/${user.header}.png`).default } style={{width:80}} alt='personal-header'/>}
                    title={ user.username }
                    message={ user.company }
                />
                <WhiteSpace/>

                <List
                    className='personal-info'
                    renderHeader={()=>'相关信息 :'}
                >
                    {
                        user.userType === 'boss'?
                            <Item multipleLine >
                                <Brief>职位: { user.port }</Brief>
                                <Brief>薪资: { user.salary }</Brief>
                                <Brief>职位要求：{ user.info }</Brief>
                            </Item> :
                            <Item multipleLine>
                                <Brief>职位: { user.port } </Brief>
                                <Brief>个人介绍：{ user.info } </Brief>
                            </Item>
                    }
                </List>

                <WhiteSpace/>
                <List className='logouot'>
                    <Button type='warning' onClick={  this.logout }>退出登录</Button>
                </List>

            </div>
        )
    }
}

export default connect(
    state => ({ user:state.user }),
    { resetUser, logout }
)(Personal)
